import { Text, Stack, Heading, Badge } from "@chakra-ui/react";
import { ArrowForwardIcon } from "@chakra-ui/icons";
import { Card } from "./Card";
import { Link } from "react-router-dom";
import { useQuery } from "react-query";
import { AppType } from "../pages/Mission";

export interface MissionEntryProps {
  id?: string;
  title?: string;
  description?: string;
  owner?: string;
  is_owner?: boolean;
  state?: string;
  link?: string;
  type?: string;
}

const EntryBadge: React.FC<{
  state: string;
  is_owner: boolean;
  missionId: string;
}> = ({ state, is_owner, missionId }) => {
  const { data: myAppData } = useQuery<AppType, any>(
    `${missionId}/userappliaction`,
    () =>
      fetch(`/api/user/${missionId}/application`, {
        headers: {
          Authorization:
            "Bearer " + String(localStorage.getItem("accessToken")),
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if (JSON.stringify(res) === "{}") {
            return undefined;
          }
          return res;
        })
  );

  if (!is_owner) {
    if (state === "可申请") {
      if (!myAppData) {
        return (
          <Badge ml="2" colorScheme="green" fontSize="0.7em">
            可申请
          </Badge>
        );
      } else if (myAppData?.state === "待处理") {
        return (
          <Badge ml="2" colorScheme="blue" fontSize="0.7em">
            已申请
          </Badge>
        );
      } else if (myAppData?.state === "被拒绝") {
        return (
          <Badge ml="2" colorScheme="purple" fontSize="0.7em">
            被拒绝
          </Badge>
        );
      } else if (myAppData?.state === "已接受") {
        return (
          <Badge ml="2" colorScheme="red" fontSize="0.7em">
            待完成
          </Badge>
        );
      } else if (myAppData?.state === "已完成") {
        return (
          <Badge ml="2" colorScheme="yellow" fontSize="0.7em">
            已完成
          </Badge>
        );
      } else {
        return <></>;
      }
    } else {
      if (myAppData?.state === "已完成") {
        return (
          <Badge ml="2" colorScheme="yellow" fontSize="0.7em">
            已完成
          </Badge>
        );
      } else {
        return <></>;
      }
    }
  } else {
    return <></>;
  }
};

export const MissionEntry: React.FC<MissionEntryProps> = ({
  id = "1",
  title = "清洁奥森",
  type = "公益志愿",
  description = "去奥林匹克森林公园捡垃圾",
  owner = "Riptide",
  is_owner = false,
  state = "可申请",
  link = "/mission/1234",
}) => (
  <Link to={link}>
    <Card
      role="group"
      transition="linear"
      transitionDuration="0.1s"
      _hover={{
        boxShadow: "lg",
      }}
    >
      <Stack spacing={2}>
        <Text fontSize="sm" color="gray.500">
          {owner} · 发布
        </Text>
        <Heading size="md">
          {title}
          <EntryBadge state={state} is_owner={is_owner} missionId={id} />
        </Heading>
        <Heading size="sm">@{type}</Heading>
        <Text>{description}</Text>
        <ArrowForwardIcon
          opacity="0"
          _groupHover={{ opacity: 1 }}
          transition="linear"
          transitionDuration="0.1s"
        />
      </Stack>
    </Card>
  </Link>
);
